<template>
  <p class="declaration">图片来源网络，请勿商用，由此带来的法律责任概不负责，如有侵权，请联系 victorybin@foxmail.com 删除</p>

  <el-backtop />
  <el-select v-model="currentId" placeholder="选择分类">
    <el-option v-for="item in classify" :key="item.id" :label="item.name" :value="item.id"> </el-option>
  </el-select>

  <div class="img-con">
    <template v-for="item in imgList" :key="item.id">
      <div class="box">
        <img :src="item.img_1024_768" />
        <div class="download">
          <el-link type="primary" :href="item.img_1024_768" target="_blank">1024*768</el-link>
          <el-link type="primary" :href="item.img_1280_1024" target="_blank">1280*1024</el-link>
          <el-link type="primary" :href="item.img_1280_800" target="_blank">1280*800</el-link>
          <el-link type="primary" :href="item.img_1366_768" target="_blank">1366*768</el-link>
          <el-link type="primary" :href="item.img_1440_900" target="_blank">1440*900</el-link>
          <el-link type="primary" :href="item.img_1600_900" target="_blank">1600*900</el-link>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { get } from '../request/index'
import { baseUrl } from '../config'
import { reactive, toRefs, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import lodash from 'lodash'
import $ from 'jquery'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    const state = reactive({
      classify: [],
      currentId: null,
      imgList: [],
      pageNumber: 0,
    })

    //获取分类
    const getClassify = async () => {
      const res = await get(baseUrl + '/apiwallpaper?c=WallPaper&a=getAllCategoriesV2&from=360chrome')
      state.classify = res.data
      state.currentId = route.params.id ? route.params.id : res.data[0].id
    }
    getClassify()

    const getImgList = async (type, id, pageNumber, pageSize = 24) => {
      const res = await get(baseUrl + `/apiwallpaper?c=WallPaper&a=getAppsByCategory&cid=${id}&start=${pageNumber}&count=${pageSize}&from=360chrome`)

      if (type === 'updata') {
        state.imgList = res.data
      } else {
        state.imgList = [...state.imgList, ...res.data]
      }
    }

    //追加
    watch(
      () => state.pageNumber,
      (newValue, oldValue) => {
        getImgList('add', state.currentId, newValue)
      }
    )

    //更新
    watch(
      () => state.currentId,
      (newValue, oldValue) => {
        router.push({
          name: 'wallpaper',
          params: { id: newValue },
        })

        state.pageNumber = 0
        getImgList('updata', newValue, state.pageNumber)
      }
    )

    const handleScroll = () => {
      if ($(document).scrollTop() + $(window).height() > $(document).height() - 500) {
        state.pageNumber = state.pageNumber + 24
      }
    }
    window.addEventListener('scroll', lodash.throttle(handleScroll, 300))

    return { ...toRefs(state) }
  },
}
</script>

<style>
.el-select {
  padding: 12px;
}

.img-con {
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1600px) {
  .img-con {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .img-con {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .img-con {
    grid-template-columns: repeat(1, 1fr);
  }
}

.box {
  position: relative;
}

.box:hover .download {
  visibility: visible;
  cursor: pointer;
}

.download {
  visibility: hidden;
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.5);
}

.el-link {
  line-height: 2;
}

img {
  width: 100%;
}

.declaration {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}
</style>
